/*
 * @Description: 图标方面
 * @Author: Zzt
 * @Date: 2022-11-17 17:08:41
 * @LastEditTime: 2022-12-20 18:13:45
 */
import { fetchFondsListByUnitId } from '@/api/fonds';
import BasicsVisualizationMain from '@/components/BasicsVisualization/BasicsVisualizationMain';
import { IFond } from '@/interfaces/fond';
import { Space } from 'antd';
import { memo, useEffect, useMemo, useState } from 'react';
import { useBasicStatistics } from '../contexts/BasicStatisticsContext';
import { appState } from '@/store/mobx';
import { observer } from 'mobx-react-lite';

const StatisticalChart = () => {
  const { archivesList, termList, secretList, setArchivesList, setTermList, setSecretList } =
    useBasicStatistics();
  console.log('fondList', archivesList, termList, secretList);

  const FileZong = archivesList?.map((item: any) => item.name);
  const FileTerm = termList?.map((item: any) => item.fondName);
  const FileSecret = secretList?.map((item: any) => item.fondName);
  const [yFileData, setYFileData] = useState([]);
  const [xFileData, setXFileData] = useState([]);
  const [fileSegment, setFileSegment] = useState('dataSize');
  const [yTermData, setYTermData] = useState([]);
  const [xTermData, setXTermData] = useState([]);
  const [termSegment, setTermSegment] = useState('totalOfTenYear');
  const [ySecretData, setYSecretData] = useState([]);
  const [xSecretData, setXSecretData] = useState([]);
  const [secretSegment, setSecretSegment] = useState('totalOfTopSecret');
  const [quanZongOptions, setQuanZongOptions] = useState([]);

  useEffect(() => {
    const selectUnit = appState.unitId;
    if (selectUnit) {
      fetchFondsListByUnitId(selectUnit).then((res) => {
        const _fondList: IFond[] = res.data;
        setQuanZongOptions(
          _fondList.map((item: any) => {
            return { value: item.id, label: item.fondName };
          })
        );
      });
    }
  }, [appState.unitId]);

  useEffect(() => {
    if (xFileData || xTermData || xSecretData) {
      if (xFileData) {
        setArchivesList(xFileData);
      }
      if (xTermData) {
        setTermList(xTermData);
      }
      if (xSecretData) {
        setSecretList(xSecretData);
      }
    }
  }, [xFileData, xTermData, xSecretData]);
  const onChangeFile = (zong: any, segment: any) => {
    setXFileData(zong.zongValue);
    setFileSegment(segment);
  };
  const onChangeTerm = (zong: any, segment: any) => {
    setXTermData(zong.zongValue);
    setTermSegment(segment);
  };
  const onChangeSecret = (zong: any, segment: any) => {
    setXSecretData(zong.zongValue);
    setSecretSegment(segment);
  };

  useEffect(() => {
    setYFileData(
      archivesList?.map((val: any) => {
        return val[fileSegment];
      })
    );
  }, [fileSegment, archivesList]);
  useEffect(() => {
    setYTermData(
      termList?.map((val: any) => {
        return val[termSegment];
      })
    );
  }, [termSegment, termList]);
  useEffect(() => {
    setYSecretData(
      secretList?.map((val: any) => {
        return val[secretSegment];
      })
    );
  }, [secretSegment, secretList]);
  return (
    <>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        {/* {useMemo(() => {}, [])} */}
        <BasicsVisualizationMain
          segmented={[
            { label: '总容量', value: 'dataSize' },
            { label: '案卷总量', value: 'folderCounts' },
            { label: '文件总量', value: 'fileCounts' },
            { label: '电子文件总量', value: 'efileCounts' },
            { label: '盒总量', value: 'boxCounts' },
            { label: '总米数', value: 'Meters' }
          ]}
          data={{ yData: yFileData, xData: FileZong }}
          onChange={onChangeFile}
          type={'档案数量'}
          quanZongOptions={quanZongOptions}
        />
        <BasicsVisualizationMain
          segmented={[
            { label: '10年', value: 'totalOfTenYear' },
            { label: '15年', value: 'fifteen' },
            { label: '20年', value: 'totalOfTwentyYear' },
            { label: '30年', value: 'totalOfThirtyYear' },
            { label: '永久', value: 'totalOfPermanent' }
          ]}
          data={{ yData: yTermData, xData: FileTerm }}
          onChange={onChangeTerm}
          type={'保管期限'}
          quanZongOptions={quanZongOptions}
        />
        <BasicsVisualizationMain
          segmented={[
            { label: '绝密', value: 'totalOfTopSecret' },
            { label: '机密', value: 'totalOfConfidential' },
            { label: '秘密', value: 'totalOfSecret' },
            { label: '公开', value: 'totalOfPublic' }
          ]}
          data={{ yData: ySecretData, xData: FileSecret }}
          onChange={onChangeSecret}
          type={'密级'}
          quanZongOptions={quanZongOptions}
        />
      </Space>
    </>
  );
};
export default memo(observer(StatisticalChart));
